<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Vizit</title>
    <link rel="stylesheet" href="css/style.css?1">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
    <script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
    <script src="scripts/snap.svg.js"></script>
    <script src="scripts/helper/util.js"></script>
    <script src="scripts/raft/event_sourcing.js?3"></script>
    <script src="http://svg.dabbles.info/animate-object-path.js"></script>
    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script>
        var s;
        var delay = 1000;
        var logIndex = 1;
        function show1() {
            let add = s.text(92, 85, ' +  ');
            let foodText = s.text(120, 85, '啤酒');
            let foodMark = s.circle(110, 80, 5).attr({ stroke: 'blue', 'strokeWidth': 1, fill: 'none' });
            let food = s.g(foodText, foodMark);
            food.clone().animate({ transform: 't300, 166' }, 2000, mina.linear);
        }

        function show(box, transform) {
            s = Snap("#svgout");
            Snap.load(`svg/${box[0]}.svg?` + version, function (loadedFragment) {
                let g = s.group().attr({ id: box[0] });
                g.append(loadedFragment);
                g.transform(transform);
            });
        }

        function put_item(item, transform, isnew = false) {
            let g = Snap("#svgout")
                .g(s.paper.image(`gif/${item[0]}.png?` + version, 120, 50))
                .attr({ id: item[0] });
            g.animate({ transform: transform }, delay, mina.bounce);
            let cb = function () {
                Snap("#svgout").g()
                    .attr({ id: item[0] + '-record' })
                    .text(450, 300 + 30 * item[2], item[2] + ', ' + item[1])
                    .animate({ transform: `t-200, 200+${30 * item[2]}` }, delay, mina.linear);
            };
            if (isnew == true) {
                Snap("#svgout").g()
                    .attr({ id: item[0] + '-log' })
                    .text(250, 200, logIndex + ', 添加 ' + item[1])
                    .animate({ transform: `t200, ${30 * logIndex}` },
                        delay, mina.linear, cb);
                logIndex++;
            } else {
                Snap("#svgout").g()
                    .attr({ id: item[0] + '-record' })
                    .text(250, 200, item[2] + ', ' + item[1])
                    .animate({ transform: `t200, ${30 * item[2]}` }, delay, mina.linear);
            }
        }

        function rm_item(items, isnew = false, reason = '下单') {
            items.forEach(item => {
                if (isnew == true) {
                    Snap("#svgout").g()
                        .attr({ id: item[0] + '-log' })
                        .text(250, 200, logIndex + ', 移除 ' + item[1] + ', ' + reason)
                        .animate({ transform: `t200, ${30 * logIndex}` },
                            delay, mina.linear);
                    logIndex++;
                }

                s.select(`#${item[0]}`).animate({ transform: 't1000,0' }, delay, mina.linear);
                s.select(`#${item[0] + '-record'}`).animate({ transform: 't1000,0' }, delay, mina.linear);
            });
        }

        let car = ['car', '购物车']
        let db = ['db', '数据库']
        let file = ['file', '事件日志']
        let peanut = ['peanut', '椒盐花生', 1]
        let chicken2 = ['chicken2', '烧鸡', 2]
        let cucumber = ['cucumber', '凉拌黄瓜', 3]
        let pork = ['pork', '猪头肉', 4]
        let chicken = ['chicken', '大盘鸡', 5]
        let beer = ['beer', '啤酒', 6]

        let statePatternSteps = [
            show.bind(null, car, 't50, 120s1.2'),
            show.bind(null, db, 't450, 100s1.2'),
            put_item.bind(null, peanut, 't200, 200s0.3', false),
            put_item.bind(null, chicken2, 't190, 150s0.3', false),
            put_item.bind(null, cucumber, 't200, 100s0.3', false),
            put_item.bind(null, pork, 't100, 200s0.2', false),
            put_item.bind(null, chicken, 't150, 100s0.1', false),
            rm_item.bind(null, [chicken2], false),
            put_item.bind(null, beer, 't60, 100', false, '不喜欢'),
            rm_item.bind(null, [peanut, cucumber, pork, chicken, beer], false, '下单'),
        ]; 
        let eventPatternSteps = [
            show.bind(null, car, 't50, 120s1.2'),
            show.bind(null, file, 't450, 120s1.2'),
            show.bind(null, db, 't150, 500s1.2'),
            put_item.bind(null, peanut, 't200, 200s0.3', true),
            put_item.bind(null, chicken2, 't190, 150s0.3', true),
            put_item.bind(null, cucumber, 't200, 100s0.3', true),
            put_item.bind(null, pork, 't100, 200s0.2', true),
            put_item.bind(null, chicken, 't150, 100s0.1', true),
            rm_item.bind(null, [chicken2], true, '不喜欢'),
            put_item.bind(null, beer, 't60, 100', true),
            rm_item.bind(null, [peanut, cucumber, pork, chicken, beer], true, '下单'),
        ];
        let index = 0;
        $(document).ready(function () {
            let thanks = function () {
                Snap.load("svg/like.svg?" + version, function (loadedFragment) {
                    let g = s.group();
                    g.append(loadedFragment);
                    g.transform('t400, 400');
                });
            };

            let play = function (pattern) {
                for (let i = 0; i < pattern.length; i++) {
                    setTimeout(() => {
                        pattern[index++]();
                    }, 5000 * i);
                }
            };

            // play(statePatternSteps);  
            play(eventPatternSteps);  

        });
    </script>
</head>

<body background="#D8FFDC">
    <div class="container-fluid">
        <div class="row">
            <div id='paper' class="col-md-12">
                <!-- SVG paper -->
                <svg id="svgout" width="800" height="800"></svg>
            </div>
        </div>
        <!-- <div class="row">
            <div id='actions' class="col-md-8 bg-light"></div>
            <div id='actions' class="col-md-4 bg-light">
                <div class="container">
                    <div class="row">
                        <div class="card">
                            <div class="card-body">
                                <ul class="list-group list-group-horizontal-md">
                                    <li class="list-group-item"><a id="next" href="#" class="card-link">
                                            Next
                                        </a></li>
                                    <li class="list-group-item"><a id="all" href="#" class="card-link">All
                                        </a></li>
                                    <li class="list-group-item"><a id="thanks" href="#" class="card-link">Thanks
                                        </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</body>

</html>